<template name='home'>
  {{#if isOnMobile}}
    <div style="margin-left:auto;margin-right:auto;margin-top:0px;max-width: 642px;padding-left:5px;padding-right:5px;" class="ui content">
        {{#if feedVideos}}
        <h2>{{ translate 'HOME_TITLE_FEED_VIDEOS'}}</h2>
          {{> videoslider feedVideos}}
        {{/if}}
        {{#if hotVideos}}
        <div class="ui left aligned grid" style="margin-bottom:0rem;margin-left:0rem;margin-right:0rem;">
        <div class="left floated left aligned ten wide column block-header" style="padding-left:0px;">
            <h2><a href='/hotvideos'>{{ translate 'HOME_TITLE_HOT_VIDEOS'}}</a></h2>
          </div>
          <div class=" floated right aligned four wide column" style="padding-right:0px;margin-top:5px;">
              <a href='/hotvideos' style="color:#666666"><h5>{{ translate 'HOME_SHOW_ALL'}}</h5></a>
          </div>
        </div>
          {{> videoslider hotVideos}}
        {{/if}}
        {{#if trendingVideos}}
        <div class="ui left aligned grid" style="margin-bottom:0rem;margin-left:0rem;margin-right:0rem;">
            <div class="left floated left aligned ten wide column block-header" style="padding-left:0px;">
                <h2><a href='/trendingvideos'>{{ translate 'HOME_TITLE_TRENDING_VIDEOS'}}</a></h2>
              </div>
              <div class=" floated right aligned four wide column" style="padding-right:0px;margin-top:5px;">
                  <a href='/trendingvideos' style="color:#666666"><h5>{{ translate 'HOME_SHOW_ALL'}}</h5></a>
              </div>
            </div>
          {{> videoslider trendingVideos}}
        {{/if}}
        {{#if newVideos}}
        <div class="ui left aligned grid" style="margin-bottom:0rem;margin-left:0rem;margin-right:0rem;">
            <div class="left floated left aligned ten wide column block-header" style="padding-left:0px;">
                <h2><a href='/trendingvideos'>{{ translate 'HOME_TITLE_NEW_VIDEOS'}}</a></h2>
              </div>
              <div class=" floated right aligned four wide column" style="padding-right:0px;margin-top:5px;">
                  <a href='/newvideos' style="color:#666666"><h5>{{ translate 'HOME_SHOW_ALL'}}</h5></a>
              </div>
            </div>
          {{> videoslider newVideos}}
        {{/if}}
        {{#if watchAgain}}
        <div class="ui left aligned grid" style="margin-bottom:0rem;margin-left:0rem;margin-right:0rem;">
            <div class="left floated left aligned ten wide column block-header" style="padding-left:0px;">
                <h2><a href='/history'>{{ translate 'HOME_TITLE_WATCH_AGAIN'}}</a></h2>
              </div>
              <div class=" floated right aligned four wide column" style="padding-right:0px;margin-top:5px;">
                  <a href='/history' style="color:#666666"><h5>{{ translate 'HOME_SHOW_ALL'}}</h5></a>
              </div>
            </div>
          {{> videoslider watchAgain}}
        {{/if}}
        {{#if neighborhood}}
        <h2>{{ translate 'HOME_TITLE_NEIGHBORHOOD'}}</h2>
          {{> videoslider neighborhood}}
        {{/if}}
    </div>
  {{else}}
    <div  class="ui container">
        {{#if feedVideos}}
        <h2>{{ translate 'HOME_TITLE_FEED_VIDEOS'}}</h2>
          {{> videoslider feedVideos}}
        {{/if}}
        {{#if hotVideos}}
        <div class="ui left aligned grid" style="margin-bottom:0rem;margin-left:0rem;margin-right:0rem;">
        <div class="left floated left aligned ten wide column block-header" style="padding-left:0px;">
            <h2><a href='/hotvideos'>{{ translate 'HOME_TITLE_HOT_VIDEOS'}}</a></h2>
          </div>
          <div class=" floated right aligned two wide column" style="padding-right:0px;margin-top: 8px;">
              <a href='/hotvideos' style="color:#666666"><h5>{{ translate 'HOME_SHOW_ALL'}}</h5></a>
          </div>
        </div>
          {{> videoslider hotVideos}}
        {{/if}}
        {{#if trendingVideos}}
        <div class="ui left aligned grid" style="margin-bottom:0rem;margin-left:0rem;margin-right:0rem;">
            <div class="left floated left aligned ten wide column block-header" style="padding-left:0px;">
                <h2><a href='/trendingvideos'>{{ translate 'HOME_TITLE_TRENDING_VIDEOS'}}</a></h2>
              </div>
              <div class=" floated right aligned two wide column" style="padding-right:0px;margin-top: 8px;">
                  <a href='/trendingvideos' style="color:#666666"><h5>{{ translate 'HOME_SHOW_ALL'}}</h5></a>
              </div>
            </div>
          {{> videoslider trendingVideos}}
        {{/if}}
        {{#if newVideos}}
        <div class="ui left aligned grid" style="margin-bottom:0rem;margin-left:0rem;margin-right:0rem;">
            <div class="left floated left aligned ten wide column block-header" style="padding-left:0px;">
                <h2><a href='/newvideos'>{{ translate 'HOME_TITLE_NEW_VIDEOS'}}</a></h2>
              </div>
              <div class=" floated right aligned two wide column" style="padding-right:0px;margin-top: 8px;">
                  <a href='/newvideos' style="color:#666666"><h5>{{ translate 'HOME_SHOW_ALL'}}</h5></a>
              </div>
            </div>
          {{> videoslider newVideos}}
        {{/if}}
        {{#if watchAgain}}
        <div class="ui left aligned grid" style="margin-bottom:0rem;margin-left:0rem;margin-right:0rem;">
            <div class="left floated left aligned ten wide column block-header" style="padding-left:0px;">
                <h2><a href='/history'>{{ translate 'HOME_TITLE_WATCH_AGAIN'}}</a></h2>
              </div>
              <div class=" floated right aligned two wide column" style="padding-right:0px;margin-top: 8px;">
                  <a href='/history' style="color:#666666"><h5>{{ translate 'HOME_SHOW_ALL'}}</h5></a>
              </div>
            </div>
          {{> videoslider watchAgain}}
        {{/if}}
        {{#if neighborhood}}
        <h2>{{ translate 'HOME_TITLE_NEIGHBORHOOD'}}</h2>
          {{> videoslider neighborhood}}
        {{/if}}
    </div>
  {{/if}}
</template>
